<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="js/codemirror.js" type="text/javascript"></script>
    <title>CodeMirror: HTML/XML demonstration</title>
    <link rel="stylesheet" type="text/css" href="css/docs.css"/>
    <style type="text/css">
      .CodeMirror-line-numbers {
        width: 2.2em;
        color: #aaa;
        background-color: #eee;
        text-align: right;
        padding-right: .3em;
        font-size: 10pt;
        font-family: monospace;
        padding-top: .4em;
      }
    </style>
  </head>
  <body style="padding: 20px;">

<p>This is a simple demonstration of the XML/HTML indentation module
for <a href="index.html">CodeMirror</a>. The <a
href="js/parsexml.js">javascript</a> file contains some comments with
more information.</p>

<div class="border">
<textarea id="code" cols="120" rows="30">
&lt;html style="color: green"&gt;
  &lt;!-- this is a comment --&gt;
  &lt;head&gt;
    &lt;title&gt;HTML Example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what
    I mean&amp;quot;&lt;/em&gt;... but might not match your style.
  &lt;/body&gt;
&lt;/html&gt;
</textarea>
</div>

<script type="text/javascript">
  var editor = CodeMirror.fromTextArea('code', {
    height: "350px",
    parserfile: "parsexml.js",
    stylesheet: "css/xmlcolors.css",
    path: "js/",
    continuousScanning: 500,
    lineNumbers: true
  });
</script>
  </body>
</html>
